<template>
  <div class="menu">
    <el-row>
      <el-col :span="12"
        ><hy-card title="反馈设置"
          ><el-descriptions direction="vertical" :column="4" border>
            <template #title>客服微信及电话号码 </template>
            <template #extra>
              <el-button type="primary" @click="handelBtnPhone(1)"
                >修改</el-button
              ></template
            >
            <el-descriptions-item label="id">{{
              data?.id
            }}</el-descriptions-item>

            <el-descriptions-item label="微信号">{{
              data?.linkmanWx3
            }}</el-descriptions-item>
            <el-descriptions-item label="电话号">{{
              data?.linkmanPhone3
            }}</el-descriptions-item>
          </el-descriptions></hy-card
        ></el-col
      >
      <el-col :span="12">
        <hy-card title="扣费设置"
          ><el-descriptions direction="vertical" :column="4" border>
            <template #title>系统扣费方式的修改 </template>
            <template #extra>
              <el-button type="primary" @click="handelBtnPhone(3)"
                >修改</el-button
              ></template
            >
            <el-descriptions-item label="id">{{
              data2?.id
            }}</el-descriptions-item>

            <el-descriptions-item label="次卡扣费">{{
              data2?.restRecord
            }}</el-descriptions-item>
            <el-descriptions-item label="充值卡扣费">{{
              data2?.refillCard
            }}</el-descriptions-item>
          </el-descriptions></hy-card
        ></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="24"
        ><hy-card title="组别设置">
          <el-descriptions direction="vertical" :column="2" border>
            <template #title>对组别进行修改 </template>
            <template #extra>
              <el-button type="primary" @click="handelBtnPhone(2)"
                >修改</el-button
              ></template
            >
            <template v-for="item in data1" :key="item.id">
              <el-descriptions-item label="id">{{
                item.id
              }}</el-descriptions-item>
              <el-descriptions-item label="名称">{{
                item.usersClassifying2
              }}</el-descriptions-item>
            </template>
          </el-descriptions>
        </hy-card></el-col
      ></el-row
    >
    <el-dialog v-model="dialogFormVisible" title="修改联系方式">
      <el-form :model="form">
        <el-form-item label="id" label-width="100px">
          <el-input v-model="form.id" />
        </el-form-item>
        <el-form-item label="微信号" label-width="100px">
          <el-input v-model="form.wx" />
        </el-form-item>
        <el-form-item label="电话号" label-width="100px">
          <el-input v-model="form.phone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handelupdataClick(1)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogFormVisible1" title="修改组别">
      <el-form :model="form1">
        <el-form-item label="id" label-width="100px">
          <el-input v-model="form1.id" />
        </el-form-item>
        <el-form-item label="名称" label-width="100px">
          <el-input v-model="form1.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handelupdataClick(2)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogFormVisible2" title="修改扣费参数">
      <el-form :model="form2">
        <el-form-item label="id" label-width="100px">
          <el-input v-model="form2.id" />
        </el-form-item>
        <el-form-item label="次卡" label-width="100px">
          <el-input v-model="form2.RestRecord" />
        </el-form-item>
        <el-form-item label="充值卡" label-width="100px">
          <el-input v-model="form2.RefilCard" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handelupdataClick(3)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, watch } from 'vue'
import HyCard from '@/base-ui/card/src/card.vue'
import {
  ChangeCurdUser,
  Curdlinkman,
  Changerecord
} from '@/service/main/curd/curd'
import { ElMessage } from 'element-plus'

export default defineComponent({
  components: {
    HyCard
  },
  name: 'menu',
  setup() {
    const dialogFormVisible = ref(false)
    const dialogFormVisible1 = ref(false)
    const dialogFormVisible2 = ref(false)
    const linknman = reactive({
      data: [],
      data1: [],
      data2: []
    })
    const form = reactive({ id: '', wx: '', phone: '' })
    const form1 = reactive({ id: '', name: '' })
    const form2 = reactive({ id: '', RestRecord: '', RefilCard: '' })
    const Getlinkman = async (type: any) => {
      let url = `constant/linkman/ ${type}`
      const { status, data } = await Curdlinkman(url, '')
      if (status == 200) {
        linknman.data = data[0]
      }
    }
    const GetChangeCurdUser = async () => {
      let type = { type: 1 }
      const { status, data } = await ChangeCurdUser(type)
      if (status == 200) {
        linknman.data1 = data
      }
    }
    const GetChangerecord = async () => {
      let type = { type: 1 }
      const { status, data } = await Changerecord(type)
      if (status == 200) {
        linknman.data2 = data[0]
      }
    }
    Getlinkman(1)
    GetChangeCurdUser()
    GetChangerecord()
    const handelBtnPhone = (type: any) => {
      if (type == 1) {
        dialogFormVisible.value = true
      } else if (type == 2) {
        dialogFormVisible1.value = true
      } else {
        dialogFormVisible2.value = true
      }
    }
    const handelupdataClick = async (type: any) => {
      if (type == 1) {
        let url = `constant/linkman/2`
        const { status, data } = await Curdlinkman(url, { ...form })
        if (status == 200) {
          if (status == 200) {
            ElMessage({
              message: `修改成功请刷新`,
              type: 'success'
            })
          }
        }
        dialogFormVisible.value = false
      } else if (type == 2) {
        let type = { type: 3 }
        const { status, data } = await ChangeCurdUser({ ...form1, ...type })
        if (status == 200) {
          if (status == 200) {
            ElMessage({
              message: `修改成功请刷新`,
              type: 'success'
            })
          }
        }
        dialogFormVisible1.value = false
      } else {
        let type = { type: 2 }
        const { status, data } = await Changerecord({ ...form2, ...type })
        if (status == 200) {
          if (status == 200) {
            ElMessage({
              message: `修改成功请刷新`,
              type: 'success'
            })
          }
        }
        dialogFormVisible2.value = false
      }
    }
    return {
      ...toRefs(linknman),
      handelBtnPhone,
      dialogFormVisible,
      dialogFormVisible1,
      dialogFormVisible2,
      form,
      form1,
      form2,
      handelupdataClick
    }
  }
})
</script>

<style scoped>
.my-label {
  background: 1px solid #000;
}
.my-content {
  background: 1px solid #000;
}
::v-deep(.el-descriptions__title) {
  font-weight: 400 !important;
  font-size: 14px;
  color: #95989d;
}
</style>
